<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>03.JSONP实例应用3</title>
		<script src="./js/JSON.js"></script>
		<script>
			function fn1 (data) {
				var html = '';
				var oUl1 = document.getElementById("ul1");
				for ( var i = 0, len = data.length; i < len; i++ ) {
					html += '<li>' + data[i] + '</li>';		
				}
				oUl1.innerHTML = html;
			}
			
			function fn2 (data) {
				var html = '';
				var oUl2 = document.getElementById("ul2");
				for ( var i = 0, len = data.length; i < len; i++ ) {
					html += '<li>' + data[i] + '</li>';	
				}
				oUl2.innerHTML = html;
			}
			
			function fn3 (data) {
				var html = '';
				var oUl3 = document.getElementById("ul3");
				for ( var i = 0, len = data.length; i < len; i++ ) {
					html += '<li>' + data[i] + '</li>';		
				}
				oUl3.innerHTML = html;
			}
		</script>
		<script>
			window.onload = function () {
				var oBtn1 = document.getElementsByTagName("input")[0];
				var oBtn2 = document.getElementsByTagName("input")[1];
				var oBtn3 = document.getElementsByTagName("input")[2];
				oBtn1.addEventListener('click', function () {
					var oScript = document.createElement("script");
					oScript.src = './php/getDataOfOptimization.php?callback=fn1';
					document.body.appendChild(oScript);
				}, false);
				
				oBtn2.addEventListener('click', function () {
					var oScript = document.createElement("script");
					oScript.src = './php/getDataOfOptimization.php?t=str&callback=fn2';
					document.body.appendChild(oScript);
				}, false);
				
				oBtn3.addEventListener('click', function () {
					var oScript = document.createElement("script");
					oScript.src = './php/getDataOfOptimization.php?t=allen&callback=fn3';
					document.body.appendChild(oScript);
				}, false);
			};
		</script>
	</head>
	<body>
		<input type="button" value="获取数字" />
		<ul id="ul1"></ul>
		<hr />
		<input type="button" value="获取字母" />
		<ul id="ul2"></ul>
		<hr />
		<input type="button" value="获取数字" />
		<ul id="ul3"></ul>
		<!--
			JSONP：JSON With Padding
			一个域名下去请求另外一个域名下的资源或文件，就会产生跨域的问题
			原理分析如下：
			1.动态创建script的方式来加载远程资源(script标签是不涉及跨域问题的)
			2.在资源加载进来之前定义好一个函数，这个函数接收一个参数(数据),函数
			里面利用这个参数做一些事情，然后在需要的时候通过动态创建script标签来
			加载对应的远程资源，当远程的资源文件被加载进来的时候，就会去执行我们
			前面定义好的函数，并且把数据作为这个函数的参数传入进去
		-->
	</body>
</html>
